#color-picker {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    text-align: center;
    position: absolute;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 7px rgba(201, 201, 201, 0.959);
}

#color-picker.hide {
    display: none !important;
}

.color-picker.color-value {
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    cursor: move;
    margin-bottom: 7px;
}

.color-picker.color-map {
    margin: 5px;
    width: 200px;
    height: 160px;
    display: inline-block;
}

.color-picker.color-opacity,
.color-picker.color-rgb {
    display: inline-block;
    height: 160px;
    width: 25px;
    margin: 5px;
    cursor: pointer;
}

.color-picker.color-opacity,
.color-picker.color-map,
.color-picker.color-rgb,
.color-picker.color-value {
    position: relative;
    background-size: 15px 15px;
    background-image: repeating-conic-gradient(from 0deg, #fff 0deg 90deg, #ddd 90deg 180deg);
}

.color-picker.color-picker-btn {
    position: absolute;
    width: 25px;
    left: -2px;
    background: transparent;
    border: 2px solid rgb(47, 107, 247);
    height: 8px;
}

.color-picker.color-rgb {
    background-size: 100% 100% !important;
    background: linear-gradient(
        to bottom,
        #f00 0%,
        #ff0 20%,
        #0f0 40%,
        #0ff 50%,
        #00f 80%,
        #f0f 100
    ) !important;
}

.color-bar {
    width: 200px;
    height: 20px;
    background-image: linear-gradient(
        to right,
        #f00 0%,
        #ff0 16.66%,
        #0f0 33.32%,
        #0ff 49.98%,
        #00f 66.64%,
        #f0f 100%
    );
}
